<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
    <meta name="description" content="Modern UI CSS">
    <meta name="author" content="Sergey Pimenov">
    <meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">

    <link href="css/modern.css" rel="stylesheet">
    <link href="css/modern-responsive.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" type="text/css">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css">

	
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/google-analytics.js"></script>
    <script src="js/github.info.js"></script>
    <script src="js/google-code-prettify/prettify.js"></script>
    <script src="js/pagecontrol.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <title>View Manifest</title>
</head>
<body class="modern-ui" onload="prettyPrint()">
<%
	String id = request.getParameter("id");
%>
    <div class="page secondary">


        <div class="page-header">
            <div class="page-header-content">
                <h1>View Manifest: Flight <c:out value="${flightID}" /></h1>
  
                <a href="/Website/StatsServletURL?id=<%=id %>" class="back-button big page-back"></a>
            </div>
        </div>

        <div class="page-region">
            <br>
            <br>
            <br>
            <div class="page-region-content">

                <div class="page-control span10" data-role="page-control">

                    <ul>
                        <li class="active"><a href="#page1">Passengers</a></li>
						<li><a href="#page2">Meal</a></li>
						<li><a href="#page3">Flight</a></li>
                    </ul>

                    <div class="frames">
                        <div class="frame active" id="page1">
                            <table class="hovered" style="padding: 20px; width: 700px;">
                            	<thead>
									<tr>
										<th class="left">First Name</th>																	
										<th class="left">Last Name</th>
										<th class="left">Seat</th>
										<th class="Left">Class</th>
										<th class="left">Meal</th>
									</tr>
									
									<tbody>
										<c:forEach varStatus= "status" items="${flightPassList}" var="passInfo">
											<tr>	
												<td><c:out value="${passInfo.firstName}" /></td>	
												<td><c:out value="${passInfo.lastName}" /></td>	
												<td><c:out value="${passInfo.seat}" /></td>	
												<td><c:out value="${classList[status.index]}" /></td>	
												<td><c:out value="${passInfo.meal}" /></td>
											</tr>
										</c:forEach>														
									</tbody>	
					
								</thead>
                            </table>
                        </div>
                        <div  class="frame" id="page2">
                            
                            <table class="hovered" style="padding: 20px; width: 700px;">
                            	<thead>
									<tr>
										<th class="left">Chicken</th>																	
										<th class="left">Vegetarian</th>
										<th class="left">Beef</th>
									</tr>
									
									<tbody>
											<tr>	
												<td><c:out value="${chicken}" /></td>	
												<td><c:out value="${vege}" /></td>	
												<td><c:out value="${beef}" /></td>	
											</tr>														
									</tbody>	
					
								</thead>
                            </table>
                            <script type="text/javascript">
		
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        var chickenNumber = ${chicken};
        var vegeNumber = ${vege};
        var beefNumber = ${beef};
        data.addRows([
          ['Chicken', chickenNumber],
          ['Vegetarian', vegeNumber],
          ['Beef', beefNumber],
        ]);

        // Set chart options
        var options = {'title':'Meal Statistics',
        		       'width':750,
        		       'height':500};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <div id="chart_div"></div>    

                        </div>
                        <div class="frame" id="page3">
                        	<table class="hovered" style="padding: 20px; width: 700px;">
                            	<thead>
									<tr>
										<th class="left">Air Line</th>																	
										<th class="left">Dep. Location</th>
										<th class="left">Dep. Time</th>
										<th class="left">Arr. Location</th>
										<th class="left">Arr. Time</th>
									</tr>
									
									<tbody>
											<tr>	
												<td><c:out value="${flightInfo.airline}" /></td>	
												<td><c:out value="${flightInfo.departureLocation}" /></td>	
												<td><c:out value="${flightInfo.departureTime}" /></td>	
												<td><c:out value="${flightInfo.arrivalLocation}" /></td>
												<td><c:out value="${flightInfo.arrivalTime}" /></td>
											</tr>														
									</tbody>	
					
								</thead>
                            </table>
                            <table class="hovered" style="padding: 20px; width: 700px;">
                            	<thead>
									<tr>
										<th class="left">Business</th>																	
										<th class="left">Economy Plus </th>
										<th class="left">Economy</th>
										<th class="left">Passengers</th>
										<th class="left">Total Ticket Price</th>
									</tr>
									
									<tbody>
											<tr>	
												<td><c:out value="${business}" /></td>	
												<td><c:out value="${economyPlus}" /></td>	
												<td><c:out value="${economy}" /></td>	
												<td><c:out value="${numPassengers}" /></td>	
												<td>$<c:out value="${sum}" /></td>	
											</tr>														
									</tbody>	
					
								</thead>
                            </table>
                            <script type="text/javascript">
		
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart2);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart2() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        var buss = ${business};
        var ecPlus = ${economyPlus};
        var ecn	= ${economy};
        data.addRows([
          ['Business', buss],
          ['Economy Plus', ecPlus],
          ['Economy', ecn]
        ]);

        // Set chart options
        var options = {'title':'Flight Statistics',
        		       'width':750,
        		       'height':500};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('flight_div'));
        chart.draw(data, options);
      }
    </script>
    <div id="flight_div"></div> 
                        </div>
                    </div>
                </div>
			</div>
		</div>
	</div>


</body>
</html>